在Javascript中，ES6以後引進了更簡單的函數寫法，讓我們在編寫程式碼時節省更多時間，也更簡單明暸，下面的範例會介紹原本的函數寫法以及新的箭頭函數，還會帶入上一篇的主題，物件導向this，了解到傳統寫法的函數及箭頭函數this的指向。

ES6補充

ES6是甚麼呢?其實當我們在寫Javascript時，有一套必須要遵守寫法的規則，而這套規則是由國際標準化組織，對Javascript制定的一套規範，又稱ECMAScript，在2015年後發布的ES6版本，是目前主流的版本，後面的文章中再詳細寫一篇來介紹!

函數寫法(Before)
當我們在ES6之前的版本，所撰寫的函數方法為:

      var action;

      action = function () {
        return "Hello, jason";
      };

ES6版本之後，所撰寫的函數方法為:

      var action;

      action = () => {
        return "Hello, jason";
      };

可以發現說在語句上變簡短了，將function給去除，換成了=>箭頭，因此也稱箭頭函數。

括號裡面可以戴上參數，讓我們來看加入參數的版本，其實就與傳統函數上大同小異。

      var action;

      action = (name) => {
        return "Hello, " + name;
      };

      document.getElementById("demo").innerHTML = action("jason");

把name帶進括號裡面，在呼叫函數時傳入要帶的值。

箭頭函數this

接下來是我們要釐清的重點，傳統函數跟箭頭函數的this會指向哪個位置。

傳統函數this

傳統函數this會指向所屬物件內的屬性，依造物件呼叫的函數決定。這樣講有些抽象，讓我們看看前面文章中的類似的例子。

範例:

      var action;
      var name = "leo";

      var person = {
        name: "jason",
        action: function () {
          console.log(this.name);     //jason
          setTimeout(() => {
            console.log(this.name);   //jason
            console.log(this);        //person物件
          }, 10);
        },
      };
      person.action();

這邊可以看到傳統函數在action裡的this，是指向person物件本身。而箭頭函數的話呢?

箭頭函數

當箭頭函數this的指向，是綁定到定義此函數的環境，不會綁定到物件本身，所以當找到name時，會是window物件的變數name。

      var action;
      var name = "leo";

      var person = {
        name: "jason",
        action: function () {
          console.log(this.name);
          setTimeout(() => {
            console.log(this.name);
            console.log(this);
          }, 10);
        },

        action2: () => {
          console.log(this.name);   //leo
          setTimeout(() => {
            console.log(this.name); //leo
            console.log(this);      //window
          }, 10);
        },
      };
      person.action2();

那今天的介紹就到這邊了，下一篇我們來看ES6有哪些寫法吧!